<template>
  <div class="app-container">
    <div class="filter-container">
      <el-upload
        v-if="checkPermission(permissionRoles.email_batch_upload)"
        ref="upload"
        v-waves
        class="filter-item"
        action="api/email/upload"
        :headers="header"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :on-success="successInfo"
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button type="primary" icon="el-icon-upload2">上传</el-button>
      </el-upload>
      <el-button v-waves type="success" class="filter-item" @click="template()">模板</el-button>

    </div>
    <el-table
      ref="table"
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      stripe
      highlight-current-row
      class="table-content"
      height="650"
    >
      <el-table-column label="文档名称" align="center" prop="filename"></el-table-column>
      <el-table-column label="上传时间" align="center" prop="create_dt"></el-table-column>
      <el-table-column label="上传人" align="center" prop="create_user"></el-table-column>
      <el-table-column label="审核时间" align="center" prop="send_time"></el-table-column>
      <el-table-column label="审核人" align="center" prop="sender"></el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="{row}">
          <el-tag v-if="row.status === 1" type="success">已审核</el-tag>
          <el-tag v-else type="primary">未审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right">
        <template slot-scope="{row}">
          <el-button v-if="checkPermission(permissionRoles.email_batch_pass) && row.status == 0" type="text" size="small" title="审核" @click="pass(row)">审核</el-button>
          <el-button type="text" size="small" title="查看" @click="viewDetail(row)">查看</el-button>
          <el-button v-if="checkPermission(permissionRoles.email_batch_del) && row.status == 0" type="text" size="small" title="删除" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="tplDialogVisible" title="模板" width="80%" :close-on-click-modal="false">
      <el-table border>
        <el-table-column label="服务器ID"></el-table-column>
        <el-table-column label="角色ID"></el-table-column>
        <el-table-column label="邮件标题"></el-table-column>
        <el-table-column label="邮件内容"></el-table-column>
        <el-table-column label="物品1"></el-table-column>
        <el-table-column label="物品1数量"></el-table-column>
        <el-table-column label="物品2"></el-table-column>
        <el-table-column label="物品2数量"></el-table-column>
        <el-table-column label="物品3"></el-table-column>
        <el-table-column label="物品3数量"></el-table-column>
        <el-table-column label="物品4"></el-table-column>
        <el-table-column label="物品4数量"></el-table-column>
        <el-table-column label="物品5"></el-table-column>
        <el-table-column label="物品5数量"></el-table-column>
        <el-table-column label="物品6"></el-table-column>
        <el-table-column label="物品6数量"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible" title="邮件信息" width="78%" :close-on-click-modal="false">
      <el-table
        ref="table"
        :data="elist"
        border
        fit
        stripe
        highlight-current-row
        class="table-content"
      >
        <el-table-column label="服务器ID" align="center" prop="sid"></el-table-column>
        <el-table-column label="角色ID" align="center" prop="actorid"></el-table-column>
        <el-table-column label="邮件标题" align="center" prop="title"></el-table-column>
        <el-table-column label="邮件内容" align="center" prop="content"></el-table-column>
        <el-table-column label="物品1" align="center" prop="item1"></el-table-column>
        <el-table-column label="物品1数量" align="center" prop="item1num"></el-table-column>
        <el-table-column label="物品2" align="center" prop="item2"></el-table-column>
        <el-table-column label="物品2数量" align="center" prop="item2num"></el-table-column>
        <el-table-column label="物品3" align="center" prop="item3"></el-table-column>
        <el-table-column label="物品3数量" align="center" prop="item3num"></el-table-column>
        <el-table-column label="物品4" align="center" prop="item4"></el-table-column>
        <el-table-column label="物品4数量" align="center" prop="item4num"></el-table-column>
        <el-table-column label="物品5" align="center" prop="item5"></el-table-column>
        <el-table-column label="物品5数量" align="center" prop="item5num"></el-table-column>
        <el-table-column label="物品6" align="center" prop="item6"></el-table-column>
        <el-table-column label="物品6数量" align="center" prop="item6num"></el-table-column>
      </el-table>
    </el-dialog>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>

import { getBatchEmailList, deleteBatchEmail, approvedBatchEmail, getEmailByBatchId } from '@/api/gm'
import waves from '@/directive/waves' // 实现点击波浪纹
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import checkPermission from '@/utils/permission'

export default {
  name: 'EmailBatch',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      permissionRoles: this.$store.state.user.permissionRoles,
      disabled: false,
      downloadLoading: false,
      dialogVisible: false,
      tplDialogVisible: false,
      tableKey: 0,
      list: [],
      elist: [],
      total: 0,
      listLoading: true,
      fileList: [],
      listQuery: {
        page: 1,
        limit: 200
      },
      header: {
        Authorization: this.$store.state.user.token
      }
    }
  },
  mounted() {
  },
  created() {
    this.getList()
  },
  methods: {
    checkPermission,
    async getList() {
      const query = this.listQuery
      this.listLoading = true
      const res = await getBatchEmailList(query)
      this.listLoading = false
      this.list = res.data.items
      this.total = res.data.total
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      })
    },

    handleDelete(row) {
      this.$confirm('你确定要删除此行数据吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await deleteBatchEmail(row.id)
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(err => { console.error(err) })
    },

    // 邮件审批操作
    async pass(row) {
      this.$confirm('你确定要这么做吗?', '高风险操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.disabled = true
        approvedBatchEmail(row.id).then(response => {
          this.disabled = false
          this.$refs.table.clearSelection()
          this.getList()
          this.$message.success('操作成功!')
        })
      }).catch(err => {
        console.error(err)
      })
    },

    // 查看邮件
    viewDetail(row) {
      this.dialogVisible = true
      getEmailByBatchId(row.id).then(response => {
        this.elist = response.data
      })
    },

    template() {
      this.tplDialogVisible = true
    },

    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    successInfo(res) {
      this.getList()
      if (res.code === 40003) {
        this.$message.error(res.message)
      } else {
        this.$refs.upload.clearFiles()
        this.visible = false
        this.$message.success(res.message)
      }
    }
  }
}
</script>
